<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> 
    #demo{
        width: 100px;
        height: 3000px;
        background-color: red;
        position: relative;
        left: 100px;
    /*     position: relative;
        left: 100px;
        top: 20px; */
       /*  display: inline; */
    }
    #son{
        width: 10px;
        height: 10px;
        background-color: blue;
        position: absolute;
        top: 5px;
        right: -5px;
    }
    #demo2{
        width: 100px;
        height: 100px;
        background-color: blue;
        position: sticky;
        top: 100px;
      /*   position: relative;
        left: 100px; */
        /* display: inline; */
   
    }
  
    </style>
    <script>
        //relative基于原来的位置移动的
        //移动的时候参照自己原来的位置
        /* 
        原来在标准流的位置继续占用，后面的盒子仍然以标准流的方式对待它（不脱标，继续保留原来位置)
        因此，相对相对定位并没有脱标，它最简单的应用是给绝对定位当爹的
        */
       /* 绝对定位absolute
       绝对定位是元素在移动位置的时候，是相对于它的祖先元素来说的(拼爹型)
       特点
       1.如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位
       2.如果祖先元素有定位（相对、绝对。固定定位），则以最近的一级
       有定位祖先元素为参考点移动位置 
        3.绝对定位不再占有原来的位置（脱标）
       */
      /* 
      子绝父相
      子级绝对定位，不会占有位置，可以放到父盒子的任何一个地方，不会影响其他的兄弟元素
      父盒子需要加定位限制子盒子在父盒子内显示
      父盒子布局时，需要占有位置，因此父亲只能是相对定位
      这就是子绝父相的由来，所以相对定位经常来作为绝对定位的父级
      总结：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位 
      */
     /* 
     3.固定定位
     1.以浏览器的可视窗口为参照点移动位置
     2.跟父元素没有任何关系
     3.不随滚动条滚动
     固定定位不再占用原先的位置（脱标的）
     */
    /* 
    粘性定位
    sticky
    粘性定位被认为是相对定位和固定定位的混合。sticky粘性的
    2.粘性定位占有原来的位置
    */
   /* 
   定位的堆叠顺序
        默认是auto，后来这居上
   z-index：1
   */
    </script>
</head>

<body>
     <div id="demo2"></div>
    
  <!--   <h2 id="app"></h2> -->
<!--     input:<input id="app2"> -->

   
    <div id="demo">
        <div id="son"></div>
    </div>
    <script>
   
     /*    console.log(document.getElementById("demo").style.position="relative") */
   /*vue2响应式原理     
    window.onload = function () {
            document.getElementById("app2").onchange = function () {
                person.input = document.getElementById("app2").value
                document.getElementById("app").innerHTML = person.input
            }
        }
        let person = {
            name: "张三",
            input: "初始内容"
        }
        let p = {

        }
        console.log(Object.defineProperty)
        Object.defineProperty(p, "name", {
            get() {
                console.log("有人使用了name属性，我发下呢")
                return person.name
            },
            set(value) {
                console.log("有人修改了name属性，我发下呢")
                person.name = value
                document.getElementById("app").innerHTML = person.name

            }
        })
        Object.defineProperty(p, "input", {
            get() {
                console.log("有人使用了input属性,我发下呢")
                return person.input
            },
            set(value) {
                console.log("有人修改了input属性")
                person.input = value
                document.getElementById("app2").value = value
                document.getElementById("app").innerHTML = person.input
            }
        }) */
        /* vue3 */
/*     let  person={
            name:"初始内容"
        }
      const app=  document.getElementById("app")
      app.innerHTML=person.name
       
        const p=new Proxy(person,{
            //给P读取属性的时候调用
            get(target,propName){
                console.log(`使用了p上的${propName}值`)
                return Reflect.get(target,propName)
            },
            //给p修改或者给添加属性的时候调用
            set(target,propName,value){
                console.log(`修改了p上的${propName}，我要去更新页面了`)
                Reflect.set(target,propName,value)
                document.getElementById("app").innerHTML=person.name
                return Reflect.set(target,propName,value)
            },
            //给p删除属性的时候调用
            deleteProperty(target,propName){
                console.log(`删除了p上的${propName}，我要去更新页面了`)
               Reflect.deleteProperty(target,propName)
                app.innerHTML=person.name || ""
                return  Reflect.deleteProperty(target,propName)
            }
        } )  */
   /*      let person={
            name:"js"
        }
        const b=Reflect.defineProperty(person,"name",{
            get(){
                console.log("条用了")
                return 3
            }
        })
        console.log(b)
        const a=Reflect.defineProperty(person,"name",{
            get(){
                console.log("条用了2")
                return 4
            }
        })
        console.log(a) */
    </script>
</body>

</html>